$text_color: #232323;
$column_layout: 2;
$social: twitter, facebook, youtube;

body {
    color: $text_color;
}

.column {
    @if $column_layout == 2 {
        width: 50%;
        float: left;
    } @else {
        width: 100%;
    }
}

.menu {
    width: 100%;

    a {
        text-decoration: none;
    }

    &::before {
        content: ''
    }
}

/* @for @each */
@for $i from 1 to 3 {
    p:nth-of-type($i) {
        margin-left: calc( 100% / $i );
    }
}

@each $icon in ($social) {
    .icon-$(icon) {
        background: url('img/$(icon).png');
    }
}

/* mixin */
 
/* @mixin icon twitter, blue;
 
@mixin icon youtube, red;

@define-mixin icon $network, $color {
    .button .$(network) {
        background-image: url('img/$(network).png');
        background-color: $color;
    }
} */

/* extend */
@define-extend rounded_button {
    border-radius: 0.5rem;
    padding: 1em;
    border-width: 0.0625rem;
    border-style: solid;
}

.blue_button {
    @extend rounded_button;
    border-color: #2F74D1;
    background-color: #3B8EFF;
}

